﻿
@{
    ViewBag.Title = "订单管理";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<style>
    .wrap .el-scrollbar__wrap {
        overflow-x: hidden !important;
    }
</style>
<div id="app" style="width:100%;height:100%;" class="el-main-background">
    <div style="height: 94%; width: 100%;">
        <!--搜索栏-->
        <div style="padding: 10px 10px  0 10px ;">
            <el-form :inline="true" :model="search" ref="ccc">
                <el-row>
                    <el-form-item label="客户名称">
                        <el-input v-model="search.Name" placeholder="客户名称"></el-input>
                    </el-form-item>
                    <el-form-item label="订单开始时间">
                        <el-date-picker v-model="search.Begin"
                                        type="datetime"
                                        placeholder="选择开始时间"
                                        align="right"
                                        :picker-options="pickerOptions">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="订单截至时间">
                        <el-date-picker v-model="search.End"
                                        type="datetime"
                                        placeholder="选择截至时间"
                                        align="right"
                                        :picker-options="pickerOptions">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="订单状态">
                        <el-select v-model="search.State" placeholder="--请选择--" clearable>
                            <el-option label="未处理" value="0"></el-option>
                            <el-option label="正在处理" value="1"></el-option>
                            <el-option label="已处理" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item>
                        <el-button type="primary" @@click="onSearch">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button @@click="">添加</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button v-on:click="StartOrder()">开始处理</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button v-on:click="DeleteOrder(scope.row)">删除</el-button>
                    </el-form-item>
                </el-row>
            </el-form>
        </div>
        <div style="height:76%;width:100%;">
            <!--表格-->
            <el-scrollbar class="wrap" style="height:100%;">
                <el-table :data="tableData" border ref="tableData" v-loading="dataLodaing" v-on:select="select" v-on:row-click="clickRow" highlight-current-row @@select-all="ifCheckOne">
                    <el-table-column type="selection"></el-table-column>
                    <el-table-column v-for="(item,index) in TableLabel" v-if="item.show && item.prop!='OrderState'" :prop="item.prop" :label="item.label" :key="index" :width="item.width" sortable="sortable">
                    </el-table-column>
                    <el-table-column v-else-if="item.show && item.prop=='OrderState'" :prop="item.prop" :label="item.label" :width="item.width">
                        <template v-slot="scope">
                            <el-tag v-if="scope.row.OrderState==0" type="danger">未处理</el-tag>
                            <el-tag v-if="scope.row.OrderState==1" type="warning">正在处理</el-tag>
                            <el-tag v-if="scope.row.OrderState==2" type="success">已完成</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button v-on:click="DownOrder(scope.row)" type="text" size="small" :disabled="scope.row.OrderState!=1">查看订单</el-button>
                            <el-button v-on:click="FinishOrder(scope.row)" type="text" size="small"  :disabled="scope.row.OrderState!=1">完成</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-scrollbar>
        </div>
    </div>
    <!--底部分页-->
    <footer class=" el-flooter-background">
        <el-row style="height:100%;width:100%;">
            <el-col :span="1" style="text-align:center;line-height:40px;">
                <el-checkbox v-model="selectOne">多选</el-checkbox>
            </el-col>
            <el-col :span="1.5" style="line-height:40px;">
                <el-dropdown trigger="click" :hide-on-click="false">
                    <el-button size="small">
                        选择列<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu>
                        <el-dropdown-item>
                            <el-checkbox :indeterminate="all" v-model="checkAll" v-on:change="CheckAllChange">全选</el-checkbox>
                        </el-dropdown-item>
                        <el-dropdown-item v-for="(item,index) in TableLabel" :key="index">
                            <el-checkbox v-model="item.show" v-on:change="itemChange">{{item.label}}</el-checkbox>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-col>
            <el-col :span="12" style="padding-top:5px;">
                <el-pagination :current-page="pagenation.currentPage" :page-sizes="[15, 20, 25, 30]" :page-size="pagenation.pageSize"
                               layout="total, sizes, prev, pager, next, jumper" background v-on:size-change="SizeChange" v-on:current-change="CurrentChange"
                               :total="pagenation.totalCount">
                </el-pagination>
            </el-col>
        </el-row>
    </footer>
    <el-dialog title="订单信息" :visible.sync="ListDialog" :close-on-click-modal="false" center width="800px">
        <el-row style="height:40px;line-height:40px;font-weight:800;font-size:18px">
            <el-col :span="3" style="text-align:center">序号</el-col>
            <el-col :span="6" style="text-align:center">歌名</el-col>
            <el-col :span="6" style="text-align:center">歌手</el-col>
            <el-col :span="6" style="text-align:center">时长</el-col>
            <el-col :span="3" style="text-align:center">品质</el-col>
            @*<el-col :span="3" style="text-align:center">地址</el-col>*@
        </el-row>
        <el-row v-for="(item,index) in Music" style="height:40px;line-height:40px;">
            <el-col :span="3" style="text-align:center">{{index+1}}</el-col>
            <el-col :span="6" style="text-align:center">{{item.Musics.MusicName}}</el-col>
            <el-col :span="6" style="text-align:center">{{item.Singer.SingerName}}</el-col>
            <el-col :span="6" style="text-align:center">{{item.Musics.MusicTime}}</el-col>
            <el-col :span="3" style="text-align:center">{{item.Musics.MusicBitRate}}</el-col>
            @*<el-col :span="3" style="text-align:center">{{item.Musics.MusicUrl}}</el-col>*@
        </el-row>
        <el-checkbox v-model="isClose" style="padding-bottom:10px;">停留在此窗口</el-checkbox>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @@click="MakingFile" :loading="loading">制 作</el-button>
            <el-button v-on:click="ListDialog=false">取 消</el-button>
        </div>
    </el-dialog>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                tableData: [],//表格的数据
                pagenation: {
                    currentPage: 1,
                    totalCount: 400,
                    pageSize: 15
                },//分页信息
                TableLabel: [
                    { prop: 'OrderCustomer', label: '客户名称', show: true, sortable: true },
                    { prop: 'OrderTime', label: '订单时间', show: true, sortable: true },
                    { prop: 'OrderType', label: '订单类型', show: true, sortable: true },
                    { prop: 'OrderState', label: '订单状态', show: true, sortable: true },
                    { prop: 'OrderNote', label: '订单备注', show: true, sortable: true },
                ],//表格信息的列的信息
                all: false,//底部栏是否展示所有列
                checkAll: true,//底部栏判断全选状态
                search: {
                    Name: '',
                    State: '',
                    Begin: '',
                    End: ''
                },//过滤条件
                ListDialog: false,//弹出框           
                Adddialog: false, //添加信息的弹出框
                Music: [],
                loading: false,//加载组件
                isClose: false,//是否自动关闭
                isInfoClose: false,//是否自动关闭
                dataLodaing: false,//数据加载是加载组件
                selectOne: false,//只能选中一行
                pickerOptions: {
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                FileName: '',
                FileTime: '',
            }
        },
        methods: {
            getOrderTable() {
                this.dataLodaing = true;
                let P = {
                    PageSize: this.pagenation.pageSize,
                    currentPage: this.pagenation.currentPage,
                    CustomerName: this.search.Name,
                    OrderBeginTime: this.search.Begin,
                    OrderEndTime: this.search.End,
                    OrderState: this.search.State
                }
                axios.post('/Order/GetAllOrders', P).then(res => {
                    this.tableData = res.data.data
                    this.pagenation.totalCount = res.data.totalCount
                    this.dataLodaing = false;
                })
            },//获取所有装配工列表
            CheckAllChange() {
                if (this.checkAll == false)//如果全选按钮选中了，按下则全部取消选中
                {
                    for (let i = 0; i < this.TableLabel.length; i++) {
                        this.TableLabel[i].show = false
                    }
                    this.all = false;
                }
                else {
                    for (let i = 0; i < this.TableLabel.length; i++) {
                        this.TableLabel[i].show = true
                    }
                    this.all = false;

                }
            },//全选所有列
            itemChange() {
                var count = 0;
                for (let i = 0; i < this.TableLabel.length; i++) {
                    if (this.TableLabel[i].show == true) {
                        count++;
                    }
                }
                if (count == this.TableLabel.length)//如果全部选中了 则全选按钮选中
                {
                    this.checkAll = true;
                    this.all = false;
                } else if (count === 0)//如果全部没选 则全选按钮不选择
                {
                    this.all = false;
                    this.checkAll = false;
                } else {//其余状况，全选按钮为其他
                    this.all = true;
                    this.checkAll = false;
                }
            },//显示的列改变
            SizeChange(val) {
                this.pagenation.pageSize = val
                this.getOrderTable();
            },//分页改变显示数量
            CurrentChange(val) {
                this.pagenation.currentPage = val
                this.getOrderTable();
            },//分页当前页改变
            EditOrder() {
                //if (this.$refs.tableData.selection.length == 1) {
                //    axios.post('/Assembler/GetAssemblerInfo', { 'id': this.$refs.tableData.selection[0] }).then(res => {
                //        console.log(res.data.data);
                //        this.AssemblerInfo = res.data.data
                //    })

                //} else {
                //    this.$message.error("复选框多选或没有选择");
                //}
            },//修改装配工信息
            onSearch() {
                this.pagenation.currentPage = 1;
                this.getOrderTable();
            },//查询
            //RemoveOrder() {
            //    if (this.$refs.tableData.selection.length > 0) {
            //        this.$confirm('是否全部删除?', '提示', {
            //            confirmButtonText: '确定',
            //            cancelButtonText: '取消',
            //            type: 'warning'
            //        }).then(() => {
            //            axios.post('/Assembler/RemoveAssemblerInfo', this.$refs.tableData.selection).then(res => {
            //                if (res.data.statusCode == 1) {
            //                    this.$message({
            //                        type: 'success',
            //                        message: res.data.message
            //                    });
            //                    this.getAssemblerTable();
            //                } else {
            //                    this.$message.error(res.data.message);
            //                }
            //            })

            //        }).catch(() => {
            //            this.$message({
            //                type: 'info',
            //                message: '已取消删除'
            //            });
            //        });
            //    } else {
            //        this.$message.error('请选择后进行操作');

            //    }
            //},//删除
            EditShiftInfoBtn(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        var timer = setTimeout(() => {
                            this.$message({
                                message: "请求超时，请刷新页面重试",
                                type: 'warning'
                            });
                            this.loading = false;
                        }, 5000);//设置定时器，5S后未登录成功，则提示登陆超时
                        axios.post('/Assembler/EditAssemblerinfo', this.AssemblerInfo).then(res => {
                            if (res.data.statusCode == 1) {
                                this.$message({
                                    message: res.data.message,
                                    type: 'success'
                                });
                                this.loading = false;
                                this.getAssemblerTable();
                                if (this.isInfoClose == false) {
                                    this.dialog = false;
                                }
                            } else {
                                this.$message.error(res.data.message);
                                this.loading = false;
                            }
                            clearInterval(timer);
                        })

                    } else {
                        return false;
                    }
                })
            },//提交修改
            CloseEdit() {
                this.dialog = false;
            },//关闭装配工信息弹窗      
            select(selection, row) {
                if (this.selectOne == false) {
                    if (selection.length > 1) {
                        let del_row = selection.shift();
                        this.$refs.tableData.toggleRowSelection(del_row, false);
                    }
                }
            },//选中表格一行时
            clickRow(row) {
            },//点击表格一行时选中
            ifCheckOne() {
                if (this.selectOne == false) {
                    this.$refs.tableData.clearSelection()
                }
            },//只能选中一行
            DownOrder(a) {
                if (a.OrderState == 1) {
                    axios.post('/Order/DealMusicList', { 'lists': a.OrderItem }).then(res => {
                        this.Music = res.data.data;
                        this.FileName = a.OrderCustomer;
                        this.FileTime = a.OrderTime;
                    })
                    this.ListDialog = true;
                } else {
                    this.$message.error("错误操作");
                }
            },
            StartOrder() {
                if (this.$refs.tableData.selection.length == 1) {
                    this.$prompt('请输入订单信息', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                    }).then(({ value }) => {
                        axios.post('/Order/VaildOrderIsExist', { 'key': value }).then(res => {
                            if (res.data.statusCode == 1) {
                                this.$message({
                                    type: 'success',
                                    message: res.data.message,
                                });
                                axios.post('/Order/StartDealOrder', this.$refs.tableData.selection[0]).then(res => {
                                    if (res.data.statusCode > 0) {
                                        this.getOrderTable();
                                    } else {
                                        this.$message.error(res.data.message);
                                    }
                                });

                            } else {
                                this.$message.error(res.data.message);
                            }
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '取消输入'
                        });
                    });
                } else {
                    //this.$message.error('请选择一个订单后进行操作');
                }
            },
            MakingFile() {
                this.loading = true;
                let P = {
                    musics: this.Music,
                    FileName: this.FileName,
                    Time: this.FileTime
                }
                axios.post('/Order/CopyMusicInfoFile', P).then(res => {
                    if (res.data.statusCode == 1) {
                        this.$message({
                            message: res.data.message,
                            type: 'success'
                        });
                        this.loading = false;  
                        this.dialog = false;
                    } else {
                        this.$message.error(res.data.message);
                        this.loading = false;
                    }
                })
            },
            FinishOrder(row) {
                if (row.OrderState == 1) {
                    this.$confirm('是否提交?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.post('/Order/FinishDealMusic', row).then(res => {
                            if (res.data.statusCode > 0) {
                                this.$message({
                                    type: 'success',
                                    message: res.data.message,
                                });
                                this.getOrderTable();
                            } else {
                                this.$message.error(res.data.message);
                            }
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        });
                    });

                   
                } else {
                    this.$message.error("错误操作");
                }
            }
        },
        created() {
            //let params = {
            //    title: document.title,
            //    ID: JSON.parse(localStorage.getItem('userInfo')).ID
            //}
            //axios.post('/Home/GetResourceBtn', params).then(res => {
            //    this.btns = res.data.data
            //})
        },//加载时获取按钮权限
        mounted() {
            this.getOrderTable();
            this.itemChange();
        },//打开时获取信息
    })
</script>


